<template>
 <div class="content">
		<div class="big_box">
			<div class="score_box">
				<img src="../../assets/image/score/0star.png"  v-if="pageInfo.score<40"  alt="">
				<img src="../../assets/image/score/1star.png"  v-if="40<=pageInfo.score&&pageInfo.score<70" alt="">
				<img src="../../assets/image/score/2star.png"  v-if="70<=pageInfo.score&&pageInfo.score<91" alt="">
				<img src="../../assets/image/score/3star.png" v-if="91<=pageInfo.score" alt="">
				<div class="cover_img">
					<div class="cover_img_tit">{{this.pageInfo.score}}<span>分</span> </div>
					<div class="cover_imt_txt" v-if="pageInfo.score<40" >不佳！</div>
					<div class="cover_imt_txt" v-if="40<=pageInfo.score&&pageInfo.score<70">良好！</div>
					<div class="cover_imt_txt"  v-if="70<=pageInfo.score&&pageInfo.score<91">很好！</div>
					<div class="cover_imt_txt"  v-if="91<=pageInfo.score">非常棒!</div>
				</div>
			</div>
			<div class="tittle" v-if="pageInfo.score<40">{{titname[test_type]}}测试不佳再努力下吧！</div>
			<div class="tittle"  v-if="40<=pageInfo.score&&pageInfo.score<70">{{titname[test_type]}}测试良好再努力下吧！</div>
			<div class="tittle" v-if="70<=pageInfo.score&&pageInfo.score<91">{{titname[test_type]}}测试很不错再接再厉！</div>
			<div class="tittle"  v-if="91<=pageInfo.score">{{titname[test_type]}}测试结果表现爆棚！</div>
			<div class="question_info">
				<div>测试时长：<span>{{getTime}}</span> </div>
				<div>题量：<span>{{this.pageInfo.num}}</span> </div>
				<div>错题数：<span>{{this.pageInfo.topic}}</span> </div>
			</div>
			<div class="question_tit">测试解析</div>
			<div class="result_box">
				<div class="result_box_real_box">
					<!-- 阅读广度 -->
					<div class="result_box_item" v-for="(item,index) in pageInfo['stem']">
						<div class="group">题组1</div>
						<div class="group_detail">
							<div class="group_detail_item_box"
								v-for="(v,n) in item.group"
							>
							<!-- 1:错一个题 2：错两个 3：全对 -->
								<div class="group_detail_item"
								:class="{ group_detail_item_green:v.flag==3,
								group_detail_item_red:v.flag==2,
								group_detail_item_orange:v.flag==1
								}"
								>{{n+1}}</div>
								<!-- 概括力 -->
								<div class="power_box">
									<div class="power_item" v-for="(v1,n1) in v.question">
										{{v1.type==1?'排除':'概括'}}
										<img class="power_item_cha" v-if="v1.is_right==0" src="../../assets/image/score/cha.png" alt="">
										<img class="power_item_dui"  v-if="v1.is_right==1" src="../../assets/image/score/duigou.png" alt="">
									</div>
			<!-- 						<div class="power_item">
										概括
										<img class="power_item_cha" src="../../assets/image/score/cha.png" alt="">
										<img class="power_item_dui" src="../../assets/image/score/duigou.png" alt="">
									</div> -->
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="button_box">
			<div>错题回顾</div>
			<div @click="gotest">重新测试</div>
		</div>
 </div>
</template>

<script>

import axios from "axios"
import qs from 'qs'

export default {
  name: 'floor',
   data() {
 	return {
		test_id:'',
		test_type:'',
		titname:{
			'wordlogic':'概括力'
		},
		pageInfo:''
 	}
 },
	 computed:{
		 getTime(){
			var arr=this.pageInfo.time.split(':')
			return arr[0]+'分'+arr[1]+'秒'
		 }
	 },
		mounted(){
			console.log(this.$route.query)
			this.test_id=this.$route.query.test_id
			this.test_type=this.$route.query.test_type
			this.renderpage()
		},
		beforeDestroy() {


		},
		 methods:{
			 gotest(){
				 //最后需要传参判断做哪种题
				 this.$router.push({'path':'/lessonAnswer',query:{type:this.test_type}})
				 // this.$emit("showloading",{
				 // 	methods:'push',
				 // 	path:'/lessonAnswer'
				 // })
			 },
			renderpage(){
				this.$request.post("getTestResult", {
					test_id:this.test_id,
					test_type:this.test_type
				}).then((res)=>{
					this.pageInfo=res.data.data
					console.log(this.pageInfo)
				})
			}
		 },


		 watch: {

		 }
	}
</script>
<style lang="less" scoped>
.content{
	width: 100vw;
	height: 100vh;
	background-image: url(../../assets/image/score/scorebg.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	overflow: hidden;
}
.big_box{
	border-top: 0.01rem solid transparent;
	width: 13.33rem;
	height: 6.57rem;
	margin: 0 auto;
	margin-top: 2.78rem;
	background-image: url(../../assets/image/score/scoresmbg.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	position: relative;
	.tittle{
		margin-top: 1.04rem;
		text-align: center;
		font-size: 0.21rem;
		
	}
	.question_info{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 0.34rem;
		margin-bottom: 0.46rem;
		&>div{
			font-size: 0.16rem;
			color: #343434;
			&>span{
				color: #427BE4;
			}
		}
		&>div:nth-child(2){
			margin: 0 0.72rem 0 0.84rem;
		}
	}
	.question_tit{
		margin: 0 auto;
		height: 0.23rem;
		width: 1.65rem;
		line-height: 0.23rem;
		padding: 0 0.31rem;
		box-sizing: border-box;
		text-align: center;
		font-size: 0.23rem;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-image: url(../../assets/image/score/titlebg.png);
		margin-bottom: 0.3rem;
		color: black;
	}
	.result_box{
		height: 3.10rem;
		width: 10.78rem;
		margin: 0 auto;
		overflow-y: scroll;
		.result_box_real_box{
			width: 100%;
			height: auto;
		}
		.result_box_item{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			color: #333333;
			&>.group{
				width: 0.81rem;
				margin-right: 0.1rem;
				font-size: 0.16rem;
			}
			&>.group_detail{
				padding: 0.37rem 0 0 0;
				box-sizing: border-box;
				width: 9.277rem;
				border-bottom: 0.01rem solid black;
				overflow: hidden;
				.group_detail_item_box{
					float: left;
					margin-right: 0.25rem;
					margin-bottom: 0.37rem;
					display: flex;
					align-items: flex-end;
					justify-content: flex-start;
				}
				.group_detail_item{
					width: 0.48rem;
					height: 0.48rem;
					border-radius: 50%;
					font-size: 0.21rem;
					text-align: center;
					line-height: 0.48rem;
					color: white;

				}
				.power_box{
					margin-left: 0.12rem;
					.power_item{
						font-size: 0.14rem;
						display: flex;
						align-items: center;
						justify-content: flex-start;
						.power_item_cha{
							width: 0.12rem;
							height: 0.12rem;
							margin-left: 0.08rem;
						}
						.power_item_dui{
							width: 0.16rem;
							height: 0.12rem;
							margin-left: 0.06rem;
						}
					}
					
				}
				.group_detail_item_green{
					background: #2ED39F;
					box-shadow: 0px -0.03rem 0px 0px #0BB47F;
				}
				.group_detail_item_red{
					background: #FF5A49;
					box-shadow: 0px -0.03rem 0px 0px #E83628;
				}
				.group_detail_item_orange{
					background: #FF9630;
					box-shadow: 0px -0.03rem 0px 0px #E37C18;
				}
			}
		}
	}

}
.score_box{
	 -webkit-user-select: none;
	  -moz-user-select: none;
	  -ms-user-select: none;
	  user-select: none;
	width: 2.19rem;
	height: 2.19rem;
	position: absolute;
	left: 50%;
	top: -1.27rem;
	transform: translateX(-50%);
	&>img{
		width: 100%;
		height: 100%;
		display: block;
	}
	.cover_img{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		text-align: center;
		padding-top: 0.63rem;
		.cover_img_tit{
			font-size: 0.5603rem;
			font-weight: bold;
			text-shadow: 0px 0.04rem 0.01rem rgba(255, 178, 178, 0.61);
			background: linear-gradient(135deg, #FF6C4F, #FF3333);
			-webkit-background-clip: text;
			color: transparent;
			&>span{
				font-size: 0.1898rem;
				margin-left: 0.08rem;
			}
		}
		.cover_imt_txt{
			font-size: 0.19rem;
			color: white;
			font-weight: 400;
			margin-top: 0.13rem;
		}
	}
	
}
	.button_box{
		margin: 0 auto;
		margin-top: 0.18rem;
		display: flex;
		align-items: center;
		justify-content: center;
		&>div{
			font-size: 0.18rem;
			text-align: center;
			line-height: 0.54rem;
			width: 1.56rem;
			height: 0.54rem;
			cursor: pointer;
		}
		&>div:nth-child(1){
			background: #FFA523;
			box-shadow: 0px -0.04rem 0px 0px #EB9212;
			border-radius: 0.27rem;
			color: #FFFFFF;
			margin-right: 0.33rem;
		}
		&>div:nth-child(2){
			background: #BBDFFF;
			box-shadow: 0px -0.04rem 0px 0px #96C3F2;
			border-radius: 0.27rem;
			color: #5D72CA;
		}
	}
</style>